<script setup>
import liuyunoTabs from "../../components/liuyuno-tabs/liuyuno-tabs.vue";
import {ref} from "vue";
import UniSearchBar from "../../uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue";
import Tabbar from "../../components/tabbar.vue";
const index = ref(0)
const tabs = ['未登记','已登记','返校途中','已到校']
const tabChange = (value) => {
  index.value=value
}
const topage6 = (to) => {
  uni.navigateTo({ url: './page6'})
}
</script>

<template>
  <view class="tp4m">
    <view class="tp4h">
      <liuyuno-tabs @tabClick="tabChange" :tabindex="index" :tab-data="tabs"></liuyuno-tabs>
    </view>
    <view v-if="index == 0" class="tp4m1">
      <view class="tp4h11">
        <uni-search-bar class="uni-tp4s1" radius="10" placeholder="请输入姓名/学号查询" clearButton="none" cancelButton="none" bg-color="#ffffff" @confirm="search"></uni-search-bar>
      </view>
      <view class="tp4h12">
        <view class="tp4pian11">
          <view class="tp42tu1"></view>
          <text style="font-size: 25px;">学生姓名</text>
        </view>
        <text style="font-size: 12px;color: #666666">学号：2020090911004</text>
        <view class="tp4line"></view>
        <view class="tp4pian12">
          <view class="tp4tu2"><text style="width: 40px">照片</text></view>
          <text style="font-size: 17px;color: #1c6ed9">假期未申请</text>
          <button class="tp4bt1" @click="topage6">协助确认返校</button>
        </view>
      </view>
      <br>
      <view class="tp4h13">
        <view class="tp4pian11">
          <view class="tp42tu1"></view>
          <text style="font-size: 25px;">学生姓名</text>
        </view>
        <text style="font-size: 12px;color: #666666">学号：2020090911004</text>
        <br>
        <text style="font-size: 12px;color: #666666">离校申请时间：2023/11/17 00:00:00</text>
        <br>
        <text style="font-size: 12px;color: #666666">行程登记时间：2023/11/17 00:00:00</text>
        <br>
        <text style="font-size: 12px;color: #666666">计划达到时间：2023/11/17 00:00:00</text>
        <br>
        <text style="font-size: 12px;color: #666666">离校目的地：成都市郫都区禹庙上街与静园东路交叉口西120米</text>
        <br>
        <text style="font-size: 12px;color: #666666">紧急联系人姓名：姓名</text>
        <br>
        <text style="font-size: 12px;color: #666666">紧急联系人电话:15884418478</text>
        <view class="tp4line"></view>
        <view class="tp4pian12">
          <view class="tp4tu2"><text style="width: 40px">照片</text></view>
          <text style="font-size: 17px;color: #1c6ed9">离校审核通过</text>
          <button class="tp4bt1" @click="topage6">协助确认返校</button>
        </view>
      </view>
      <br>
      <view class="tp4h13">
        <view class="tp4pian11">
          <view class="tp42tu1"></view>
          <text style="font-size: 25px;">学生姓名</text>
        </view>
        <text style="font-size: 12px;color: #666666">学号：2020090911004</text>
        <br>
        <text style="font-size: 12px;color: #666666">离校申请时间：2023/11/17 00:00:00</text>
        <br>
        <text style="font-size: 12px;color: #666666">行程登记时间：2023/11/17 00:00:00</text>
        <br>
        <text style="font-size: 12px;color: #666666">计划达到时间：2023/11/17 00:00:00</text>
        <br>
        <text style="font-size: 12px;color: #666666">离校目的地：成都市郫都区禹庙上街与静园东路交叉口西120米</text>
        <br>
        <text style="font-size: 12px;color: #666666">紧急联系人姓名：姓名</text>
        <br>
        <text style="font-size: 12px;color: #666666">紧急联系人电话:15884418478</text>
        <view class="tp4line"></view>
        <view class="tp4pian12">
          <view class="tp4tu2"><text style="width: 40px">照片</text></view>
          <text style="font-size: 17px;color: #1c6ed9">留校审核通过</text>
          <button class="tp4bt1" @click="topage6">协助确认返校</button>
        </view>
      </view>
    </view>
    <view v-else-if="index == 1" class="tp4m1">
      <view class="tp4h11">
        <uni-search-bar class="uni-tp4s1" radius="10" placeholder="请输入姓名/学号查询" clearButton="none" cancelButton="none" bg-color="#ffffff" @confirm="search"></uni-search-bar>
      </view>
      <view class="tp4h14">
        <view class="tp4pian11">
          <view class="tp42tu1"></view>
          <text style="font-size: 25px;">学生姓名</text>
        </view>
        <text style="font-size: 12px;color: #666666">返校登记时间：2023/11/17 00:00:00</text>
        <br>
        <text style="font-size: 12px;color: #666666">计划出发时间：2023/11/17 00:00:00</text>
        <br>
        <text style="font-size: 12px;color: #666666">计划到校时间：2023/11/17 00:00:00</text>
        <br>
        <text style="font-size: 12px;color: #666666">出发地点：A地点</text>
        <view class="tp4line"></view>
        <view class="tp4pian12">
          <view class="tp4tu2"><text style="width: 40px">照片</text></view>
          <text style="font-size: 17px;color: #1c6ed9">返校已登记</text>
          <button class="tp4bt1">拨打电话</button>
        </view>
      </view>
    </view>
    <view v-else-if="index == 2" class="tp4m1">
      <view class="tp4h11">
        <uni-search-bar class="uni-tp4s1" radius="10" placeholder="请输入姓名/学号查询" clearButton="none" cancelButton="none" bg-color="#ffffff" @confirm="search"></uni-search-bar>
      </view>
      <view class="tp4h14">
        <view class="tp4pian11">
          <view class="tp42tu1"></view>
          <text style="font-size: 25px;">学生姓名</text>
        </view>
        <text style="font-size: 12px;color: #666666">返校登记时间：2023/11/17 00:00:00</text>
        <br>
        <text style="font-size: 12px;color: #666666">计划出发时间：2023/11/17 00:00:00</text>
        <br>
        <text style="font-size: 12px;color: #666666">计划到校时间：2023/11/17 00:00:00</text>
        <br>
        <text style="font-size: 12px;color: #666666">出发地点：A地点</text>
        <view class="tp4line"></view>
        <view class="tp4pian12">
          <view class="tp4tu2"><text style="width: 40px">照片</text></view>
          <text style="font-size: 17px;color: #1c6ed9">返校已登记</text>
          <button class="tp4bt1">拨打电话</button>
        </view>
      </view>
    </view>
    <view v-else-if="index == 3" class="tp4m1">
      <view class="tp4h11">
        <uni-search-bar class="uni-tp4s1" radius="10" placeholder="请输入姓名/学号查询" clearButton="none" cancelButton="none" bg-color="#ffffff" @confirm="search"></uni-search-bar>
      </view>
      <view class="tp4h14">
        <view class="tp4pian11">
          <view class="tp42tu1"></view>
          <text style="font-size: 25px;">学生姓名</text>
        </view>
        <text style="font-size: 12px;color: #666666">返校登记时间：2023/11/17 00:00:00</text>
        <br>
        <text style="font-size: 12px;color: #666666">计划出发时间：2023/11/17 00:00:00</text>
        <br>
        <text style="font-size: 12px;color: #666666">计划到校时间：2023/11/17 00:00:00</text>
        <br>
        <text style="font-size: 12px;color: #666666">出发地点：A地点</text>
        <view class="tp4line"></view>
        <view class="tp4pian12">
          <view class="tp4tu2"><text style="width: 40px">照片</text></view>
          <text style="font-size: 17px;color: #1c6ed9">已到校</text>
          <button class="tp4bt1">拨打电话</button>
        </view>
      </view>
    </view>
    <view class="tabh"><Tabbar :cur-index="3"/></view>
  </view>
</template>

<style scoped lang="scss">
.tp4m{
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(240, 248, 250, 1);
  width: 375px;
  height: 1000px;
}
.tp4h{
  display: flex;
}
.tp4m1{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 375px;
}
.tp4h11{
  display: flex;
  justify-content: center;
  width: 100%;
}
.uni-tp4s1{
  width: 90%;
  height: 40px;
}
.tp4h12{
  height: 150px;
  width: 85%;
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: 3px 3px 3px #666666;
  padding: 10px;
}
.tp4pian11{
  display: flex;
  align-items: center;
  height: 30px;
}
.tp4tu1{
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: #87CEFA;
}
.tp4line{
  border-bottom: 1px solid #666666;
  margin: 20px 10px;
}
.tp4pian12{
  display: flex;
  align-items: center;
  align-content: center;
}
.tp4tu2{
  background-color: #87CEFA;
  border-radius: 100%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp4bt1{
  background-color: #1E90FF;
}
.tp4h13{
  height: 300px;
  width: 85%;
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: 3px 3px 3px #666666;
  padding: 10px;
}
.tp4h14{
  height: 220px;
  width: 85%;
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: 3px 3px 3px #666666;
  padding: 10px;
}
.tabh{
  width: 100%;
  position: fixed;
  bottom: 0;
}
</style>